<template>
  <div class="stage1" style="width: 100%">
    <!-- 体系层 -->
    <div style="margin-top: 20px; height: 25%; margin-left: 20px">
      <span class="layer-title">侦察探测层</span>
      <div id="system-layer" class="layer green">
      </div>
    </div>

    <!-- 指挥控制层 -->
    <div style="margin-top: 20px; height: 25%; margin-left: 20px">
      <span class="layer-title">指挥控制层</span>
      <div id="platform-layer" class="layer blue">
      </div>
    </div>

    <!-- 火力打击层 -->
    <div style="margin-top: 20px; height: 25%; margin-left: 20px">
      <span class="layer-title">火力打击层</span>
      <div id="equipment-layer" class="layer red">
      </div>
    </div>
  </div>
</template>
<script>
import LeaderLine from "@/static/leader-line.min.js";
export default {
  props: {
    fromActivityData: {
      ssl_ids:[],
      nodes:[],
      lines:[]
    } 
  },
  data: () => ({
    datas:{},
    currentSsl: "",
    ssl_ids: [
      {
        id: "1",
        name: "杀伤链1",
        order: [1, 2, 3, 4],
      },
      {
        id: "2",
        name: "杀伤链2",
        order: [5, 6, 7, 8],
      },
    ],

    nodes: [
      {
        node_id: 1,
        ssl_id: 1,
        level: "侦察探测层",
        fttea: "F1",
        equipment_id: "1",
        equipment: "预警机",
        description: "发现敌机",
      },
      {
        node_id: 2,
        ssl_id: 1,
        level: "指挥控制层",
        fttea: "F2",
        equipment_id: "2",
        equipment: "战斗机",
        description: "持续监测",
      },
      {
        node_id: 3,
        ssl_id: 1,
        level: "火力打击层",
        fttea: "F3",
        equipment_id: "3",
        equipment: "空空导弹",
        description: "导弹发射",
      },
      {
        node_id: 4,
        ssl_id: 1,
        level: "侦察探测层",
        fttea: "F3",
        equipment_id: "3",
        equipment: "预警机",
        description: "持续发现",
      },
      {
        node_id: 5,
        ssl_id: 1,
        level: "火力打击层",
        fttea: "F3",
        equipment_id: "3",
        equipment: "空空导弹",
        description: "导弹爆炸",
      },
    ],
    lines: [
      {
        id: "1",
        start: "1",
        end: "2",
        ssl_id: 1,
      },
      {
        id: "2",
        start: "2",
        end: "3",
        ssl_id: 1,
      },
      {
        id: "3",
        start: "3",
        end: "4",
        ssl_id: 1,
      },
      {
        id: "4",
        start: "4",
        end: "5",
        ssl_id: 1,
      },
    ],
    leaderLines: [],
    colorIdx:[]
  }),
  methods: {
    getData(){

    },
    loadData() {
      //向页面写入node信息
      let sc = 0;
      let pc = 0;
      let ec = 0;
      let systemLayer = document.getElementById("system-layer");
      let platformLayer = document.getElementById("platform-layer");
      let equipmentLayer = document.getElementById("equipment-layer");
      systemLayer.innerHTML = "";
      platformLayer.innerHTML = "";
      equipmentLayer.innerHTML = "";
      // console.log("nodes")
      this.nodes.forEach((node) => {
        //选择ssl
        if (node.ssl_id == this.currentSsl) {
          
          // console.log(node)
          const newElement = document.createElement("div");
          newElement.setAttribute("class", "node top10");
          newElement.setAttribute("id", "node" + node.node_id);
          let color=this.generateRandomColor()
          console.log(color)
          let str = `<div class="border center font-align font" style="background-color:`+color+`">${node.fttea}</div>
              <div class="border center font-align white">${node.equipment}</div>
              <div class="border center font-align white">${node.description}</div>`;
          newElement.innerHTML = str;
          // console.log("element")
          // console.log(newElement)

          if (node.level == "侦察探测") {
            newElement.setAttribute(
              "style",
              // "margin-left:" + (50 + sc * 100) + "px;"
              "margin-left:" + 50 + "px;"
            );
            systemLayer.appendChild(newElement);
            //console.log(systemLayer)
            sc = 0;
            pc++;
            ec++;
          } else if (node.level == "指挥控制") {
            newElement.setAttribute(
              "style",
              "margin-left:" + 50 + "px;"
            );
            platformLayer.appendChild(newElement);
            sc++;
            pc = 0;
            ec++;
          } else if (node.level == "火力打击") {
            newElement.setAttribute(
              "style",
              "margin-left:" + 50 + "px;"
            );
            equipmentLayer.appendChild(newElement);
            sc++;
            pc++;
            ec = 0;
          }
        }
      });
    },
    drawLine() {
      this.destroyLine()
      this.lines.forEach((line) => {
        if (line.ssl_id == this.currentSsl) {
          //画图
          let start = document.getElementById("node" + line.start);
          let end = document.getElementById("node" + line.end);
          let newLine = new LeaderLine(start, end, {
            path: "straight",
          });
          this.leaderLines.push(newLine);
        }
      });
    },
    destroyLine() {
      this.leaderLines.forEach((line) => {
        line.remove();
      });
      this.leaderLines = [];
    },
    sendActivityData(parentData,ssl_id){
      if(ssl_id==0){
        return
      }
      // console.log("父组件传递的数据")
      // console.log(parentData)
      this.lines = parentData.lines.length == 0? []:parentData.lines
      this.nodes = parentData.nodes.length == 0? []:parentData.nodes
      this.ssl_ids = parentData.ssl_ids.length == 0? []:parentData.ssl_ids
      this.currentSsl=ssl_id
      this.loadData()
      this.drawLine()
    },
    generateRandomColor() {
      // 生成一个随机的RGB颜色
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    generateColors() {
      if(this.colorIdx.length != 0){
        return;
      }
      const colors = [];
      const totalColors = this.nodes.length; // 要生成的颜色总数
      while (colors.length < totalColors) {
        const color = this.generateRandomColor();
        if (!colors.includes(color)) {
          colors.push(color);
        }
      }
      this.colorIdx = colors;
    }
  },
  updated(){
    // console.log("update")
    this.destroyLine();
    // console.log(this.leaderLines)
    this.drawLine();
  },
  mounted() {
    // console.log("mounted")
    this.getData()
    //画节点
    this.loadData()
    //画箭头
    this.drawLine()
  },
  beforeDestroy() {
    this.destroyLine();
  },
  // watch: {
  //   currentSsl: {
  //     handler() {
  //       this.loadData();
  //       this.drawLine();
  //     },
  //   },
  // },
};
</script>

<style>
.layer-title {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  margin-left: 20px;
  font-weight: bold;
}
.layer{
  min-height:200px;
}
.span-box {
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 10px;
}

.arrow {
  content: "\27F6";
}

el-collapse-transition {
  flex-shrink: 0;
}
.description {
  width: 650px;
  margin-left: 20px;
  margin-top: 12%;
}
.stage1 {
  display: inline-block;
  /* overflow: hidden; */
  white-space: nowrap;
}
.circle-blue {
  background: #c3ceed;
  clip-path: circle(50%);
  height: 25em;
  width: 25em;
  margin-left: 20px;
  margin-top: 10px;
}

.node {
  min-width: 100px;
  height: 80px;
  display: inline-block;
  /* margin-left:80px; */
  margin-right: 20px;
}
.border {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}
.center {
  margin: 0 auto;
}
.left {
  margin: 0 30px;
  display: inline-block;
}
.right {
  margin: 0 110px;
  display: inline-block;
}
.white{
  background-color: azure;
}
.orange{
  background-color: rgb(236, 156, 99);
}
.top10 {
  padding-top: 10px;
  margin-top: 25px;
}
.top20 {
  padding-top: 20px;
}
.bottom0 {
  margin-bottom: 0px;
}
.red {
  background-color: rgb(255, 159, 159);
}

.blue {
  background-color: rgb(162, 229, 255);
}

.green {
  background-color: rgb(110, 207, 110);
}
.font-align {
  text-align: center;
}
.shape-name {
  width: 120px;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bold;
}
.nowrap{
  display: inline-block;
  /* overflow: hidden; */
  white-space: nowrap;
}
.font{
  color: #fff;
}
</style>
